<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<title>子墨商城</title>

	<!-- Google font -->
	<link type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">
	<%--<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/asserts/css/google-font.css">--%>

	<!-- Bootstrap -->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/asserts/reception/css/bootstrap.min.css"/>

	<!-- Slick -->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/asserts/reception/css/slick.css"/>
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/asserts/reception/css/slick-theme.css"/>

	<!-- nouislider -->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/asserts/reception/css/nouislider.min.css"/>

	<!-- Font Awesome Icon -->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/asserts/reception/css/font-awesome.min.css">

	<!-- Custom stlylesheet -->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/asserts/reception/css/style.css"/>

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	<!-- jQuery Plugins -->
	<script src="${pageContext.request.contextPath}/asserts/reception/js/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath}/asserts/reception/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/asserts/reception/js/slick.min.js"></script>
	<script src="${pageContext.request.contextPath}/asserts/reception/js/nouislider.min.js"></script>
	<script src="${pageContext.request.contextPath}/asserts/reception/js/jquery.zoom.min.js"></script>
	<script src="${pageContext.request.contextPath}/asserts/reception/js/jquery.backstretch.js"></script>
</head>
<body>
	<!-- HEADER -->
	<header>
		<!-- TOP HEADER -->
		<div id="top-header">
			<div class="container">
				<ul class="header-links pull-left">
					<li><a href="#"><i class="fa fa-phone"></i> 商城固定电话：1572987xxxx</a></li>
					<li><a href="#"><i class="fa fa-envelope-o"></i> 商城官方邮箱：46109747@qq.com</a></li>
					<li><a href="#"><i class="fa fa-map-marker"></i> 商城联系地址：四川省宜宾市翠屏区酒圣路8号</a></li>
				</ul>
				<ul class="header-links pull-right">
					<c:if test="${not empty user}">
						<li>
							<span style="color: white;">
								<i class="fa fa-user-o"></i> 欢迎，${user.username}
							</span>
						</li>
						<li>
							<a href="${pageContext.request.contextPath}/order?method=myOrder">
								<i class="fa fa-rmb"></i> 我的订单
							</a>
						</li>
						<c:if test="${user.isadmin == 1}">
							<li>
								<a href="${pageContext.request.contextPath}/statistics">
									<i class="fa fa-meetup"></i> 进入后台
								</a>
							</li>
						</c:if>
					</c:if>
					<c:if test="${empty user}">
						<li>
							<a href="#">
								<i class="fa fa-rmb"></i> 在线支付
							</a>
						</li>
					</c:if>
				</ul>
			</div>
		</div>
		<!-- /TOP HEADER -->

		<!-- MAIN HEADER -->
		<div id="header">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
					<!-- LOGO -->
					<div class="col-md-3">
						<div class="header-logo">
							<a href="#" class="logo">
								<img src="${pageContext.request.contextPath}/asserts/reception/img/logo.png" alt="子墨商城">
							</a>
						</div>
					</div>
					<!-- /LOGO -->

					<!-- SEARCH BAR -->
					<div class="col-md-6">
						<div class="header-search">
							<form action="${pageContext.request.contextPath}/search" method="post">
								<input type="hidden" name="method" value="searchProduct">
								<select class="input-select" name="cid">
									<c:forEach items ="${categorys}" var="c" varStatus="s">
										<c:if test="${s.index == 0}">
											<option value="all">商品分类</option>
										</c:if>
										<option value="${c.cid}">${c.cname}</option>
									</c:forEach>
								</select>
								<input class="input" placeholder="输入搜索内容" name="key">
								<button class="search-btn" type="submit">搜索</button>
							</form>
						</div>
					</div>
					<!-- /SEARCH BAR -->

					<!-- ACCOUNT -->
					<div class="col-md-3 clearfix">
						<div class="header-ctn">

							<!-- MyAccount -->
							<div style="font-size: 12px;">
								<c:choose>
									<c:when test="${not empty user}">
										<a href="${pageContext.request.contextPath}/user?method=logout">
											<i class="fa fa-sign-out"></i> 退出登录
										</a>
									</c:when>
									<c:otherwise>
										<a href="${pageContext.request.contextPath}/user?method=loginPage">
											<i class="fa fa-user-o"></i> 登录
										</a>
									</c:otherwise>
								</c:choose>
							</div>
							<!-- /MyAccount -->

							<!-- Cart -->
							<div class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
									<i class="fa fa-shopping-cart"></i>
									<span>购物车</span>
									<c:if test="${not empty cart.cartItems }">
										<div class="qty">${fn:length(cart.cartItems)}</div>
									</c:if>
								</a>
								<c:if test="${not empty cart.cartItems }">
									<div class="cart-dropdown" style="right: -100%;">
										<c:forEach items="${cart.cartItems}" var="item">
											<div class="cart-list">
												<div class="product-widget">
													<div class="product-img">
														<img src="${pageContext.request.contextPath}/${item.product.pimage}" alt="${item.product.pname}">
													</div>
													<div class="product-body">
														<h3 class="product-name"><a href="#">${item.product.pname}</a></h3>
														<h4 class="product-price"><span class="qty">x${item.count}</span>￥${item.subTotal}</h4>
													</div>
													<button class="delete" onclick="isSureRemoveProduct('${item.product.pid}')"><i class="fa fa-close"></i></button>
												</div>
											</div>
										</c:forEach>

										<div class="cart-summary">
											<small>选择了${fn:length(cart.cartItems)}件商品</small>
											<h5>合计：￥${cart.total}</h5>
										</div>
										<div class="cart-btns">
											<a href="${pageContext.request.contextPath}/cart?method=cartPage">看详情</a>
											<a href="${pageContext.request.contextPath}/order?method=saveOrder">去结算<i class="fa fa-arrow-circle-right"></i></a>
										</div>
									</div>
								</c:if>
							</div>
							<!-- /Cart -->

							<!-- Menu Toogle -->
							<div class="menu-toggle">
								<a href="#">
									<i class="fa fa-bars"></i>
									<span>商品分类</span>
								</a>
							</div>
							<!-- /Menu Toogle -->
						</div>
					</div>
					<!-- /ACCOUNT -->
				</div>
				<!-- row -->
			</div>
			<!-- container -->
		</div>
		<!-- /MAIN HEADER -->
	</header>
	<!-- /HEADER -->

	<!-- NAVIGATION -->
	<nav id="navigation">
		<!-- container -->
		<div class="container">
			<!-- responsive-nav -->
			<div id="responsive-nav">
				<!-- NAV -->
				<ul class="main-nav nav navbar-nav">
					<li <c:if test="${empty param.cid}">class="active"</c:if>><a href="${pageContext.request.contextPath}/">首页</a></li>
					<c:forEach items ="${categorys}" var="c">
						<li <c:if test="${c.cid == param.cid}">class="active"</c:if>>
							<a href="${pageContext.request.contextPath}/product?method=productCategory&cid=${c.cid}&pageNumber=1">
								${c.cname}
							</a>
						</li>
					</c:forEach>
				</ul>
				<!-- /NAV -->
			</div>
			<!-- /responsive-nav -->
		</div>
		<!-- /container -->
	</nav>
	<!-- /NAVIGATION -->

</body>
<script>

	/**
	 * 刷新验证码
	 * @param pid
	 */
	function flushCodeImg(dom){
		dom.attr("src","${pageContext.request.contextPath}\VerifyCode?date="+new Date().getTime());
	}

	/**
	 * 查看商品详情
	 * @param pid
	 */
	function productDeatils(pid) {
		window.location.href = '${pageContext.request.contextPath}/product?method=productDetails&pid='+pid;
	}

	/**
	 * 添加商品到购物车
	 * @param pid
	 */
	function addProductToCart(pid) {
		window.location.href = '${pageContext.request.contextPath}/cart?method=addProductToCart&pid='+pid+'&count=1';
	}

	/**
	 * 从购物车中删除商品
	 * @param pid
	 */
	function isSureRemoveProduct(pid){
		if(confirm("少侠，商品优惠不易，真的要这么残忍吗？")){
			window.location.href = "${pageContext.request.contextPath}/cart?method=removeProductFromCart&pid="+pid;
		}
	}

	/**
	 * 清空购物车
	 */
	function removeAllFromCart() {
		window.location.href = '${pageContext.request.contextPath}/cart?method=removeAllFromCart';
	}

	/**
	 * 结算订单
	 */
	function saveOrder() {
		window.location.href = '${pageContext.request.contextPath}/order?method=saveOrder';
	}

	/**
	 * 支付订单
	 * @param oid
	 */
	function payOrder(oid) {
		window.location.href = '${pageContext.request.contextPath}/order?method=payOrder&oid='+oid;
	}

	/**
	 * 确认收货
	 * @param oid
	 */
	function finishOrder(oid) {
		window.location.href = '${pageContext.request.contextPath}/order?method=finishOrder&oid='+oid;
	}
</script>
</html>